<template>
  <div class='login-container'>
    <n-form
      :model="formModel"
      ref="formRef"
      :rules="rules"
      label-placement="left"
      :label-width="80"
      size="medium"
    >
      <div class='form-header'>
        <div class='form-header-title'>Manage-System</div>
        <div class='form-header-desc'>一个后台管理解决方案</div>
      </div>

      <n-form-item label="" path="username">
        <n-input v-model:value="formModel.username" placeholder="请输入用户名" :autofocus="true" @keyup.enter.native="handleLogin">
          <template #prefix>
            <n-icon size="18" color="#808695">
              <person-outline-filled/>
            </n-icon>
          </template>
        </n-input>
      </n-form-item>
      <n-form-item label="" path="password">
        <n-input v-model:value="formModel.password" type="password" placeholder="请输入密码" @keyup.enter.native="handleLogin">
          <template #prefix>
            <n-icon size="18" color="#808695">
              <lock-outlined/>
            </n-icon>
          </template>
        </n-input>
      </n-form-item>
      <n-form-item label="" path="rememberPassword">
        <n-checkbox v-model:checked='formModel.rememberPassword' label='记住密码' />
      </n-form-item>

      <n-button type='info' @click='handleLogin' :loading="loading" :disabled="loading">Login</n-button>
      
    </n-form>
  </div>

</template>


<script lang='ts' setup>
  import Cookies from 'js-cookie'
  import { ref, reactive, onMounted } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import { PersonOutlineFilled, LockOutlined } from '@vicons/material'

  const store = useStore()
  const route = useRoute();
  const router = useRouter();


  interface FormState {
    username: string;
    password: string;
  }

  const formRef = ref()
  const formModel = reactive({
    username: '',
    password: '',
    rememberPassword: false
  })
  const rules = {
    username: {required: true, message: '请输入用户名', trigger: 'blur' },
    password: {required: true, message: '请输入密码', trigger: 'blur' }
  }
  const loading = ref(false)

  function handleLogin() {
    
    formRef.value.validate(async (errors: any) => {
      if(!errors) {
        loading.value = true
        const { username, password, rememberPassword } = formModel

        const params: FormState = {
          username,
          password
        }

        if(rememberPassword) {
          Cookies.set('username', username, { expires: 15 })
          Cookies.set('password', password, { expires: 15 })
          Cookies.set('rememberPassword', String(rememberPassword), { expires: 15 })
        } else {
          Cookies.remove('username')
          Cookies.remove('password')
          Cookies.remove('rememberPassword')
        }

        try {
          const result = await store.dispatch('user/Login', params)
          const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
          router.push({ path: toPath })
        } catch(e) {
          console.log('e', e)
        }

      } else {
        console.log('表单校验失败');
      }
      loading.value = false
    })
  }

  

  onMounted(() => {
    formModel.username = Cookies.get('username') as string
    formModel.password = Cookies.get('password') as string
    formModel.rememberPassword = Boolean(Cookies.get('rememberPassword'))
  })

</script>

<style lang='stylus' scoped>
  .login-container
    width 100%
    height 100%
    background-image url('../../assets/images/login-bg.jpg')
    background-size cover
    display flex
    justify-content center
    align-items center

    .n-form
      width 350px
      padding 25px 45px
      background-color #dadbdd
      box-shadow 5px 5px 10px #909090

      .form-header
        margin-bottom 25px
        text-align center

      .form-header-title
        padding 5px
        font-size 25px

      .form-header-desc
        color #808695

      .n-button
        width 100%
</style>
